<template>
  <!--创建地图容器元素-->
  <div style="position: relative">
    <div id="tdtMapDivID" class="divTdtMap"></div>
    <div class="searchBox">
      <el-autocomplete
        prefix-icon="el-icon-search"
        v-model="searchName"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入地点搜索"
        :trigger-on-focus="false"
        @select="handleSelect"
        style="width: 250px"
      ></el-autocomplete>
    </div>
    <div class="tdMapToolBox">
      <div
        @click="openPolygonTool()"
        :class="isPolygonSelect ? 'tdMapToolBtnSelect' : 'tdMapToolBtn'"
      >
        <el-image
          :src="isPolygonSelect ? polygonImage_w : polygonImage"
          fit="fit"
        ></el-image>
      </div>
      <div
        @click="openCircleTool()"
        :class="isCircleSelect ? 'tdMapToolBtnSelect' : 'tdMapToolBtn'"
      >
        <el-image
          :src="isCircleSelect ? circleImage_w : circleImage"
          fit="fit"
        ></el-image>
      </div>
    </div>
    <div v-if="isShow" class="styleSelectBox">
      <el-form ref="form" label-width="60px">
        <el-form-item label="名  称">
          <el-input @change="onInputChange" v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="备  注">
          <el-input
            @change="onInputChange"
            type="textarea"
            v-model="desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="填  充">
          <el-color-picker
            @change="onColorChange()"
            v-model="fillColor"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="透明度">
          <el-slider
            @change="onOpacityChange"
            v-model="fillOpacity"
          ></el-slider>
        </el-form-item>
        <el-form-item label="线宽">
          <el-slider
            :min="1"
            :max="6"
            :step="1"
            @change="onWeightChange"
            v-model="lineWeight"
          ></el-slider>
        </el-form-item>
      </el-form>
      <div style="display: flex">
        <div class="styleSelectBtn">
          <el-button @click="saveLayer" type="primary">保存</el-button>
        </div>
        <div class="styleSelectBtn">
          <el-button @click="deleteLayer">删除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'

export default {
  components: {},
  name: 'TdtMap',
  data() {
    return {
      polygonImage: require('@/assets/polygon.png'),
      polygonImage_w: require('@/assets/polygon_w.png'),
      isPolygonSelect: false,
      circleImage: require('@/assets/circle.png'),
      circleImage_w: require('@/assets/circle_w.png'),
      isCircleSelect: false,
      tdtMap: {},
      isShow: false,
      selectLayer: null,
      fillColor: '#FF0000',
      fillOpacity: 50,
      lineWeight: 1,
      name: '',
      desc: '',
      polygonTool: null,
      circleTool: null,
      searchName: '',
      querySearch: [],
      localsearch: null,
      cb: null,
    }
  },
  created() {},
  mounted() {
    // 初始化天地图
    this.initTdtMap()
    request({
      url: '/api/monitorMap/list',
      method: 'get',
    }).then((data) => {
      console.log(111, data)
    })
  },
  watch: {},
  methods: {
    // 初始化天地图
    initTdtMap() {
      let T = window.T
      this.tdtMap = new T.Map('tdtMapDivID')
      //设置显示地图的中心点和级别
      this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)

      this.polygonTool = new T.PolygonTool(this.tdtMap, {
        showLabel: false,
        color: this.fillColor,
        weight: 1,
        opacity: 1,
        fillColor: this.fillColor,
        fillOpacity: 0.5,
      })
      //this.polygonTool.open()
      this.polygonTool.addEventListener('draw', this.onDrawPolygon)

      this.circleTool = new T.CircleTool(this.tdtMap, {
        color: this.fillColor,
        weight: 1,
        opacity: 1,
        fillColor: this.fillColor,
        fillOpacity: 0.5,
      })
      this.circleTool.addEventListener('drawend', this.onDrawCircle)

      var config = {
        pageCapacity: 10, //每页显示的数量
        onSearchComplete: this.localSearchResult, //接收数据的回调函数
      }
      //创建搜索对象
      this.localsearch = new T.LocalSearch(this.tdtMap, config)
    },
    querySearchAsync(queryString, cb) {
      console.log(queryString)
      this.localsearch.search(queryString, 4)
      this.cb = cb
    },
    localSearchResult(e) {
      e.suggests.forEach((element) => {
        element['value'] = element.name
      })
      this.cb(e.suggests)
    },
    handleSelect(item) {
      var lonlat = item.lonlat.split(',')
      this.tdtMap.panTo(
        new T.LngLat(parseFloat(lonlat[0]), parseFloat(lonlat[1]))
      )
    },
    onDrawCircle(e) {
      this.circleTool.close()
      this.circleTool.clear()
      this.isShow = true
      var circle = new T.Circle(e.currentCenter, e.currentRadius, {
        color: this.fillColor,
        weight: this.lineWeight,
        opacity: 1,
        fillColor: this.fillColor,
        fillOpacity: this.fillOpacity / 100,
      })
      circle.setFillColor(this.fillColor)
      circle.setColor(this.fillColor)
      circle.setFillOpacity(this.fillOpacity / 100)
      circle.setWeight(this.lineWeight)
      circle.addEventListener('click', this.layerClick)
      this.selectLayer = circle
      this.isCircleSelect = false
      //向地图上添加面
      this.tdtMap.addOverLay(circle)
    },
    onDrawPolygon(e) {
      this.polygonTool.close()
      this.polygonTool.clear()
      this.isShow = true
      var polygon = new T.Polygon(e.currentLnglats, {
        color: this.fillColor,
        weight: this.lineWeight,
        opacity: 1,
        fillColor: this.fillColor,
        fillOpacity: this.fillOpacity / 100,
      })
      polygon.setFillColor(this.fillColor)
      polygon.setColor(this.fillColor)
      polygon.setFillOpacity(this.fillOpacity / 100)
      polygon.setWeight(this.lineWeight)
      polygon.addEventListener('click', this.layerClick)
      this.selectLayer = polygon
      this.isPolygonSelect = false
      //向地图上添加面
      this.tdtMap.addOverLay(polygon)
    },
    onColorChange() {
      this.selectLayer.setFillColor(this.fillColor)
      this.selectLayer.setColor(this.fillColor)
    },
    onOpacityChange() {
      this.selectLayer.setFillOpacity(this.fillOpacity / 100)
    },
    onWeightChange() {
      this.selectLayer.setWeight(this.lineWeight)
    },
    openPolygonTool() {
      this.polygonTool.open()
      this.fillColor = '#FF0000'
      this.fillOpacity = 50
      this.lineWeight = 1
      this.isShow = false
      this.isPolygonSelect = true
      this.name = ''
      this.desc = ''
    },
    openCircleTool() {
      this.circleTool.open()
      this.fillColor = '#FF0000'
      this.fillOpacity = 50
      this.lineWeight = 1
      this.isShow = false
      this.isCircleSelect = true
      this.name = ''
      this.desc = ''
    },
    onInputChange() {
      this.selectLayer['name'] = this.name
      this.selectLayer['desc'] = this.desc
    },
    layerClick(e) {
      this.selectLayer = e.target
      this.name = this.selectLayer['name']
      this.desc = this.selectLayer['desc']
      this.isShow = true
    },
    saveLayer() {
      this.isShow = false
      var saveData = {
        regionName: this.selectLayer.name,
        remark: this.selectLayer.desc,
        fillInColor: this.selectLayer.getFillColor(),
        fillInTransparency: this.selectLayer.getFillOpacity(),
        polygon: this.selectLayer.getLngLats().toString(),
      }
      request({
        url: '/monitorMap',
        method: 'post',
        data: saveData,
      }).then(() => {
        console.log(111, this.saveData)
      })
    },
    deleteLayer() {
      this.isShow = false
      this.tdtMap.removeOverLay(this.selectLayer)
    },
  },
}
</script>
 
<style scoped>
.searchBox {
  width: 40px;
  position: absolute;

  top: 40px;
  left: 40px;
  z-index: 999;
}
.divTdtMap {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 80vh;
  z-index: 0;
}
.tdMapToolBox {
  width: 40px;
  position: fixed;

  top: 200px;
  right: 40px;
  z-index: 999;
}
.tdMapToolBox > :first-child {
  border-bottom: none;
}
.tdMapToolBtn {
  width: 40px;
  height: 40px;
  padding: 5px;
  border: 1px solid #ccc;
  margin-left: 0px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  font-size: 18px;
}
.tdMapToolBtnSelect {
  background-color: rgb(0, 140, 255);
  width: 40px;
  height: 40px;
  padding: 5px;
  border: 1px solid #ccc;
  margin-left: 0px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
}
.styleSelectBox {
  padding: 20px;
  position: fixed;
  background-color: #fff;
  top: 170px;
  right: 90px;
  z-index: 999;
  border-radius: 10px;
}
.styleSelectBtn {
  display: flex;
  flex: 1;
  justify-content: center;
}
</style>